<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/certificate/list' }">考证管理</el-breadcrumb-item>
      <el-breadcrumb-item>报名名单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" maxlength="15" show-word-limit v-model="formInline.q" placeholder="输入关键字"></el-input>
      </el-form-item>
      <!-- <el-select v-model.number="formInline.school_grade" clearable placeholder="选择年级">
        <el-option v-for="item in gradeList" :key="item.choice" type="number" :label="item.description" :value="item.choice"></el-option>
      </el-select> -->
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table class="table" size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60"></el-table-column>
      <el-table-column sortable prop="player_name" label="姓名" width="150"></el-table-column>
      <el-table-column sortable prop="id_num" label="身份证" width="250"></el-table-column>
      <el-table-column sortable prop="phone" label="手机号" width="150"></el-table-column>
      <el-table-column sortable prop="birthday" label="生日" width="150"></el-table-column>
      <el-table-column sortable prop="school" label="学校" width="150"></el-table-column>
      <el-table-column sortable prop="school_grade" label="学校年级" width="150"></el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleSee(scope.$index, scope.row)">查看</el-button>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next, total"
      :current-page="pageparm.currentPage"
      :page-size="pageparm.pageSize"
      :total="pageparm.total"
      @current-change="changePage"
      @prev-click="changePage"
      @next-click="changePage">
    </el-pagination>

    <!-- 查看 -->
    <el-dialog title="查看信息" :visible.sync="seeFormVisible" width="70%" @click="closeDialog">
      <el-form label-width="120px" :model="seeForm" :rules="rules" ref="seeForm">
        <el-form-item label="姓名" prop="player_name">
          <el-input :disabled="true" size="small" maxlength="15" v-model="seeForm.player_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input :disabled="true" size="small" v-model="seeForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="报名等级" prop="obj_grade">
          <el-input :disabled="true" size="small" v-model="seeForm.obj_grade" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="id_num">
          <el-input :disabled="true" size="small"  show-word-limit maxlength="18" v-model="seeForm.id_num" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="证件照" prop="id_photo_url">
          <img v-if="seeForm.id_photo_url" :src="$store.state.imgUrlPix + seeForm.id_photo_url" class="avatar">
          <el-input :disabled="true" size="small" v-model="seeForm.id_photo_url" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group :disabled="true" v-model="seeForm.sex">
            <el-radio label="boy">男</el-radio>
            <el-radio label="girl">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker :disabled="true" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="seeForm.birthday"></el-date-picker>
         </el-form-item>
         <el-form-item label="监护人姓名" prop="parent_name">
          <el-input :disabled="true" size="small" maxlength="15" v-model="seeForm.parent_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="组织" prop="organization">
          <el-input :disabled="true" size="small" v-model="seeForm.organization" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="学校" prop="school">
          <el-input :disabled="true" size="small" v-model="seeForm.school" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="学校就读年级" prop="school_grade">
          <el-input :disabled="true" size="small" v-model="seeForm.school_grade" auto-complete="off"></el-input>
        </el-form-item>

        <el-divider content-position="left">资金信息</el-divider>

        <el-form-item label="是否交定金" prop="has_pre_pay">
          <el-input :disabled="true" size="small" v-model="seeForm.has_pre_pay" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否交尾款" prop="has_final_pay">
          <el-input :disabled="true" size="small" v-model="seeForm.has_final_pay" auto-complete="off"></el-input>
        </el-form-item>

        <el-divider content-position="left">考试成绩</el-divider>

        <el-form-item label="考试等级" prop="grade">
          <el-input :disabled="true" size="small" v-model="seeForm.grade" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否通过考试" prop="has_passed">
          <el-input :disabled="true" size="small" v-model="seeForm.has_passed" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="考试得分" prop="score">
          <el-input :disabled="true" size="small" v-model="seeForm.score" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="考试结果" prop="result">
          <el-input :disabled="true" size="small" v-model="seeForm.result" auto-complete="off"></el-input>
        </el-form-item>

        <el-divider content-position="left">其它</el-divider>
        <el-form-item label="视频记录" prop="video_url">
          <el-input :disabled="true" size="small" v-model="seeForm.video_url" auto-complete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>

    <!-- 编辑页面 -->
    <el-dialog title="修改信息" :visible.sync="editFormVisible" width="70%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="姓名" prop="player_name">
          <el-input size="small" maxlength="15" v-model="editForm.player_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="id_num">
          <el-input size="small"  show-word-limit maxlength="18" v-model="editForm.id_num" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="证件照" prop="id_photo_url">
          <el-upload
            name="file_obj"
            :headers="uploadHeaders"
            class="avatar-uploader"
            :action="uploadImageUrl"
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="handleBeforeUpload">
            <img v-if="editForm.id_photo_url" :src="$store.state.imgUrlPix + editForm.id_photo_url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="" prop="id_photo_url">
          <el-input :disabled="true" size="small" v-model="editForm.id_photo_url" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="editForm.sex">
            <el-radio label="boy">男</el-radio>
            <el-radio label="girl">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="editForm.birthday"></el-date-picker>
         </el-form-item>
         <el-form-item label="监护人姓名" prop="parent_name">
          <el-input size="small" maxlength="15" v-model="editForm.parent_name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="组织" prop="organization">
          <el-input size="small" v-model="editForm.organization" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="学校" prop="school">
          <el-input size="small" v-model="editForm.school" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="学校就读年级" prop="school_grade">
          <el-select v-model.number="editForm.school_grade" placeholder="必选">
            <el-option v-for="item in gradeList" :key="item.choice" type="number" :label="item.description" :value="item.choice"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitEditForm('editForm')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { activityApplicationUpdate, activityApplicationList, activityApplicationAllList,
  activityApplicationDetail, activityApplicationAllListSearch, activitynGradeList, schoolGradeList, uploadImageUrl} from '../../api/userMG'
export default {
  data() {
    return {
      uploadHeaders: {
        token: localStorage.getItem('logintoken')
      },
      listData: [],
      formInline: {
        activity_id: 0,
        q: '', // 搜索关键字
        // school_grade: '', // 搜索年级
        page_index: 1,
        page_size: 15,
        token: localStorage.getItem('logintoken')
      },
      gradeList: [],
      seeFormVisible: false,
      seeForm: {
        player_name: '',
        id_num: '',
        birthday: '',
        school_grade: 0,
        sex: '',
        organization: '',
        parent_name: '',
        school: '',
        id_photo_url: '',

        phone: '',
        obj_grade: '',

        has_pre_pay: 0,
        has_final_pay: 0,
        pay_info: {},

        grade: 0,
        has_passed: 0,
        score: 0,
        result: '',

        // question_list: [],
        // answer_list: [],
        video_url: '',
      },
      editFormVisible: false,
      editForm: {
        main_id: 0,
        player_name: '',
        id_num: '',
        birthday: '',
        school_grade: 0,
        sex: '',
        organization: '',
        parent_name: '',
        school: '',
        id_photo_url: '',
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 15,
        total: 0
      },
       // rules表单验证
      rules: {
        player_name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'blur' },
        ],
        school: [
          { required: true, message: '请输入学校', trigger: 'blur' },
        ],
        id_photo_url: [
          { required: true, message: '请选择证件照', trigger: 'blur' },
        ],
        parent_name: [
          { required: true, message: '请输入监护人姓名', trigger: 'blur' },
        ],
        organization: [
          { required: true, message: '请输入组织', trigger: 'blur' },
        ],
        id_num: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
        ],
        birthday: [
          { required: true, message: '请选择生日', trigger: 'blur' },
        ],
        school_grade: [
          { type: 'number', required: true, message: '请选择学校年级', trigger: 'blur' },
        ]
      },
    }
  },
  created() {
    this.init()
  },
  watch: {
    $route(to, from) {
      this.init()
    }
  },
  methods: {
    init() {
      if (this.$route.query.activity_id) { // 搜索用
        this.formInline.activity_id = parseInt(this.$route.query.activity_id)
      } else {
        this.formInline.activity_id = 0
      }
      this.getGradelist()
      this.getdata(this.formInline)
    },
    changePage(cur){
      this.formInline.page_index = cur;
      this.pageparm.currentPage = cur;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },

    getdata(parameter) {
      this.loading = true
      let target = {}
      Object.assign(target ,parameter);
      if (!target.activity_id)  delete target.activity_id
      if (!target.q)  delete target.q
      if (!target.school_grade)  delete target.school_grade
      let rep = target.activity_id ? activityApplicationList(target) : activityApplicationAllListSearch(target)
      rep.then(res => {
          this.loading = false
          if (res.code === 0) {
            this.listData = res.data.list
            this.pageparm.currentPage = this.formInline.page_index
            this.pageparm.pageSize = this.formInline.page_size
            this.pageparm.total = res.total
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        })
    },
    getGradelist() {
      let rep = schoolGradeList()
      rep.then(res => {
        if (res.code === 0) {
          this.gradeList = res.data
        } else {
          this.$message({
            type: 'info',
            message: res.msg
          })
        }
      })
      .catch(err => {
        this.loading = false
        this.$message.error('加载失败，请稍后再试！')
      })
      // if (!this.$route.query.main_id) {
      //   let rep = activitynGradeList()
      //   rep.then(res => {
      //     if (res.code === 0) {
      //       this.gradeList = res.data
      //     } else {
      //       this.$message({
      //         type: 'info',
      //         message: res.msg
      //       })
      //     }
      //   })
      //   .catch(err => {
      //     this.loading = false
      //     this.$message.error('加载失败，请稍后再试！')
      //   })
      // } else {
      //   let rep = activityDetail({main_id: parseInt(this.$route.query.main_id)})
      //   rep.then(res => {
      //     if (res.code === 0) {
      //       this.gradeList = res.data.grade
      //     } else {
      //       this.$message({
      //         type: 'info',
      //         message: res.msg
      //       })
      //     }
      //   })
      //   .catch(err => {
      //     this.loading = false
      //     this.$message.error('加载失败，请稍后再试！')
      //   })
      // }
    },
    handleSee: function(index, row) {
      let rep = activityApplicationDetail({main_id: row.main_id})
      rep.then(res => {
        this.loading = false
        if (res.code === 0) {
          this.seeFormVisible = true
          this.seeForm.main_id = row.main_id
          this.seeForm.player_name = row.player_name
          this.seeForm.id_num = row.id_num
          this.seeForm.birthday = row.birthday
          this.seeForm.school_grade = row.school_grade
          this.seeForm.organization = row.organization
          this.seeForm.id_photo_url = row.id_photo_url
          this.seeForm.sex = row.sex
          this.seeForm.parent_name = row.parent_name
          this.seeForm.school = row.school

          this.seeForm.phone = row.phone
          this.seeForm.obj_grade = row.obj_grade

          this.seeForm.has_pre_pay = row.has_pre_pay
          this.seeForm.has_final_pay = row.has_final_pay
          this.seeForm.pay_info = row.pay_info

          this.seeForm.grade = row.grade
          this.seeForm.has_passed = row.has_passed
          this.seeForm.score = row.score
          this.seeForm.result = row.result

          // this.seeForm.question_list = row.question_list
          // this.seeForm.answer_list = row.answer_list
          this.seeForm.video_url = row.video_url

          this.seeFormVisible = true
        } else {
          this.$message({
            type: 'info',
            message: res.msg
          })
        }
      })
      .catch(err => {
        this.loading = false
        this.$message.error('加载失败，请稍后再试！')
      })
    },
    handleEdit: function(index, row) {
      this.editFormVisible = true
      this.editForm.main_id = row.main_id
      // this.editForm.activity_id = row.activity_id
      this.editForm.player_name = row.player_name
      this.editForm.id_num = row.id_num
      this.editForm.birthday = row.birthday
      this.editForm.school_grade = row.school_grade
      this.editForm.organization = row.organization
      this.editForm.id_photo_url = row.id_photo_url
      this.editForm.sex = row.sex
      this.editForm.parent_name = row.parent_name
      this.editForm.school = row.school
    },
    submitEditForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          activityApplicationUpdate(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.code) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '提交成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.addFormVisible = false
              this.loading = false
              this.$message.error('提交失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    handleBeforeUpload(file) {
      const isImage = file.type.includes("image");
      if (!isImage) {
        this.$message.error("上传文件类型必须是图片!");
      }
      return isImage;
    },
    handleSuccess(res, file) {
      if (res.code === 0) {
        this.editForm.id_photo_url = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    closeDialog() {
      this.seeFormVisible = false
      this.editFormVisible = false
    }
  }
}
</script>
<style scoped>
.el-breadcrumb {
  margin-bottom: 20px;
}
.el-table--border, .el-table--group {
  margin: 20px 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 180px;
  height: 200px;
  display: block;
}
</style>
